<template>
  <div class="right-board">
    <el-tabs v-model="currentTab" class="center-tabs">
      <el-tab-pane name="field">
        <span slot="label"
          ><i class="el-icon-date" style="margin-right: 6px"></i>属性配置</span
        >
      </el-tab-pane>
      <el-tab-pane name="form">
        <span slot="label"
          ><i class="el-icon-setting" style="margin-right: 6px"></i>表单设置</span
        >
      </el-tab-pane>
    </el-tabs>
    <div class="field-box">
      <el-scrollbar class="right-scrollbar">
        <el-form v-show="currentTab === 'field'" size="small" label-width="100px">
          <div v-for="(item, index) in components" :key="index">
            <component
              v-if="item.name === activeItem.compType"
              :getFormId="getFormId"
              :props="activeItem"
              :is="item.content"
            ></component>
          </div>
        </el-form>
        <el-form
          v-show="currentTab === 'form'"
          size="small"
          ref="formConf"
          :model="formConf"
          label-width="100px"
        >
          <el-form-item label="表单名称">
            <el-input class="input" v-model="formConf.formRef"></el-input>
          </el-form-item>
          <el-form-item label="表单模型">
            <el-input class="input" v-model="formConf.formModel"></el-input>
          </el-form-item>
          <el-form-item label="校验模型">
            <el-input class="input" v-model="formConf.formRules"></el-input>
          </el-form-item>
          <el-form-item label="表单尺寸">
            <el-select v-model="formConf.size" style="width: 100%">
              <el-option label="中等" value="medium" />
              <el-option label="小号" value="small" />
              <el-option label="迷你" value="mini" />
            </el-select>
          </el-form-item>
          <el-form-item label="标签对齐">
            <el-select v-model="formConf.labelPosition" style="width: 100%">
              <el-option label="右对齐" value="right" />
              <el-option label="左对齐" value="left" />
              <el-option label="顶端对齐" value="top" />
            </el-select>
          </el-form-item>
          <el-form-item label="标签宽度">
            <el-input-number
              v-model="formConf.labelWidth"
              :min="60"
              :max="140"
              style="width: 100%"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="栅格间隔">
            <el-input-number
              v-model="formConf.gutter"
              :min="0"
              :max="30"
              style="width: 100%"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="动态表格支持组件高亮显示">
            <el-switch v-model="formConf.dynamicTableAllowed"></el-switch>
          </el-form-item>
          <el-form-item label="禁用表单">
            <el-switch v-model="formConf.disabled"></el-switch>
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import reg from "./custom/register";

export default {
  name: "configPanel",
  data() {
    return {
      formIdArray: [],
      components: reg,
      isRollback: false,
      currentTab: "field",
    };
  },
  props: {
    activeItem: {
      type: Object,
      default: () => {},
    },
    itemList: {
      type: Array,
      default: () => [],
    },
    formConf: {
      type: Object,
      default: () => {},
    },
  },
  created() {
    this.components.forEach((c) => {
      c.content = require(`./custom/configs/${c.name}`).default;
    });
  },
  methods: {
    record() {
      this.$emit("record");
    },
    getFormId(itemId) {
      this.formIdArray = [];
      Array.from(this.itemList, (item) => {
        if (item.compType === "row") {
          Array.from(item.columns, (column) => {
            Array.from(column.list, (col) => {
              if (col._id !== itemId) {
                this.formIdArray.push(col.id);
              }
            });
          });
        } else {
          if (item._id !== itemId) {
            this.formIdArray.push(item.id);
          }
        }
      });
      return this.formIdArray;
    },
  },
  watch: {
    formConf: {
      handler(newValue, oldValue) {
        if (this.isRollback === true) {
          this.isRollback = false;
        } else {
          this.record();
        }
      },
      deep: true,
    },
  },
};
</script>
<style scoped>
.field-box >>> .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
